<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 

    复合样式的定义：
      一个CSS属性只控制一种样式，叫做单一样式。
      一个CSS属性控制多种样式，叫做复合样式。
       复合样式的写法是通过空格对多个属性进行分割，有些复合写法不需要关心顺序，例如background和border，有的需要关心顺序，例如font。

       目前学到的复合样式有
        1.background： background 是不需要关心顺序 需要注意的是，position的2个值不能分开写，否则会出错，可以写1个
               background: red url(./panda.jpg) no-repeat fixed 30px 30px;
               background: url(./panda.jpg) scroll red 30px 90px no-repeat; 

        2.border  border 也不需要关心顺序
                 border: blue 2px solid;
                 border: 2px solid blue;

        3.font font 需要关心顺序，需要注意：
             1. 如果要写font，至少要保证有两个值：size family（并且按顺序放在最后）
             2. color不属于font系列，不能添加到font的复合写法中。
             3. 注意行高是写在size后面，以/分开 ，其他的属性是可以在前面随便排列
                  weight  style  size/line-height  family 
        
        注意：单一样式与复合样式尽量不要混写，如果非要混写，那么一定要先写复合样式，再写单一样式。因为在复合样式里没有写的样式会按照默认样式进行设置，所以要后写单一模式把之前复合里默认的样式覆盖掉。
   -->

   <style>
     div{
       width: 500px;
       height: 500px;
       /* border-color: red;
       border-width: 2px;
       border-style: solid; */

       /* background: red url(./panda.jpg) no-repeat fixed 30px 30px; */
       /* background: url(./panda.jpg) scroll red 30px 90px no-repeat; */

       /* border: blue 2px solid; */
       /* border: 2px solid blue; */

       font: italic bold 20px/30px 宋体;

     }

   </style>

</head>
<body>
    <div>这是一段文字</div>
</body>
</html>